<template>
  <div class="quick-entry-container">
    <ListTab
      ref="listTabRef"
      v-model="tabId"
      :tabs="modules"
      :pure-tab-max-height="pureTabMaxHeight"
      :show-scrollable="false"
      :font-size="fontSize"
      height="37px"
      show-drop
      padding-left="0px"
      style="border-bottom: 1px solid #f5f5f5;"/>
    <!-- height="auto" -->
    <div class="module-group">
      <template v-if="!initLoading">
        <template v-if="moduleChildren.length">
          <template v-for="item in moduleChildren">
            <div v-if="isPc" :key="item.id" :class="{'mobile-module-box': !isPc}" class="module-box module-box-container" @click="goApprovalList(item)">
              <div :style="{ background: item.iconColor || defaultColor }" class="module-icon">
                <img :src="getIcon(item.icon)">
              </div>
              <ToolTip :content="item.name" class="module-name"/>
            </div>
            <NavItem v-else :key="item.id" :background-color="item.iconColor || defaultColor" :name="item.name" :icon="getIcon(item.icon)" class="module-item" @click.native="goApprovalList(item)"/>
          </template>
        </template>
        <EmptyPlaceholder
          v-else
          :empty-img="emptyImg"
          :empty-text-top="4"
          text-color="#999"
          text="暂无数据"
          image-size="120px"
          style="margin-top: 24px"
        />
      </template>
      <template v-else>
        <div v-for="i in 3" :key="i" class="skeleton-container module-box-container">
          <div class="icon-skeleton skeleton-animate" />
          <div class="text-skeleton skeleton-animate" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import ListTab from '@/components/ListTab';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import iconConfig from '@/mixins/iconConfig';
import { getProcessManagement, getRecentlyUsedList } from '@/api/legal';
import { ROUTE_PARAMS, CONTRACT_TYPES } from '@/utils/const/process';
import emptyImg from '@/assets/indexEmpty.png';
import NavItem from '@/views/layout/components/navItem';

export default {
  name: 'QuickEntryCard',
  components: {
    ListTab,
    EmptyPlaceholder,
    NavItem
  },
  mixins: [iconConfig],
  props: {
    isPc: {
      type: Number,
      default: 1
    },
    styleConfig: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      emptyImg,
      tabId: 0,
      initLoading: false,
      modules: [{ id: 0, name: '最近使用', children: [] }],
      pureTabMaxHeight: 'none'
    };
  },
  computed: {
    moduleChildren() {
      if (!Array.isArray(this.modules) || !this.modules.length) return [];
      const currModules = this.modules.filter(module => module.id === this.tabId);
      if (!currModules.length) return [];
      return currModules[0].children || [];
    },
    fontSize() {
      if (!this.styleConfig || !this.styleConfig.fontSize) {
        return '14px';
      } else {
        return `${this.styleConfig.fontSize}px`;
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    resetTable: _.debounce(function() {
      this.$nextTick(() => {
        this.$refs['listTabRef'] && this.$refs['listTabRef'].$forceUpdate();
        this.setPureTabMaxHeight();
      });
    }, 800),
    async init() {
      try {
        await this.queryRecentlyUsedList();
        await this.queryProcessManagement();
        this.setPureTabMaxHeight();
      } catch (e) {
        this.initLoading = false;
      }
    },
    // 获取最近使用审批模块
    async queryRecentlyUsedList() {
      try {
        this.initLoading = true;
        const result = await getRecentlyUsedList({ isMobile: false, pageSize: 10 });
        const recentlyUsedList = result && result.data || [];
        this.$set(this.modules[0], 'children', recentlyUsedList);
        this.initLoading = false;
      } catch (e) {
        this.initLoading = false;
      }
    },
    async queryProcessManagement() {
      try {
        const params = { type: 1 };
        const result = await getProcessManagement(params);
        const resultArr = this.setContractModules(result.data);
        // 排除没有审批项的分组
        const modules = resultArr.filter(arr => arr.children && arr.children.length);
        this.modules = [...this.modules, ...modules];
      } catch (e) {
        this.initLoading = false;
      }
    },
    // 设置 '更多' 下拉最大可展示高度
    setPureTabMaxHeight() {
      const moduleDom = document.querySelector('.module-group');
      const domHeight = moduleDom && moduleDom.clientHeight || 0;
      this.pureTabMaxHeight = domHeight + 'px';
    },
    // 将合同所有子类型合并成单个合同流程模块
    setContractModules(list) {
      if (!Array.isArray(list) || !list.length) return [];
      const contractModuleIndex = this.getContractModuleIndex(list);
      const contractProcess = { name: '合同审批', id: -1, icon: 'configIcon2', type: -1 };
      if (contractModuleIndex !== -1) {
        const contractModuleData = list[contractModuleIndex];
        const contractModuleList = contractModuleData.children || [];
        const result = contractModuleList.filter(module => !CONTRACT_TYPES.includes(module.type));
        const contractProcessList = contractModuleList.filter(module => CONTRACT_TYPES.includes(module.type)) || [];
        contractProcess.myApprovalNum = contractProcessList.length ? contractProcessList[0].myApprovalNum : 0;
        result.unshift(contractProcess);
        list[contractModuleIndex].children = result;
      }
      return list;
    },
    // 获取合同类所在分类
    getContractModuleIndex(list) {
      let findIndex = -1;
      list.forEach((item, index) => {
        item.children && item.children.forEach(module => {
          if (CONTRACT_TYPES.includes(module.type)) {
            findIndex = index;
          }
        });
      });
      return findIndex;
    },
    goApprovalList(data) {
      if (data.isCustom) {
        this.$router.push({
          name: 'approvalList',
          params: { id: data.id },
          query: { isFromApprovalModule: 1 }
        });
      } else {
        if (ROUTE_PARAMS.has(data.type)) {
          const routeName = ROUTE_PARAMS.get(data.type);
          this.$router.push({ name: routeName });
        } else {
          this.$message.warning('无法识别此流程模块');
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.quick-entry-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  .module-group {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-top: 12px;
    .module-box-container {
      margin: 0 12px 12px 0;
      padding: 12px;
      display: flex;
      align-items: center;
      width: 180px;
      height: 56px;
      border: 1px solid #EBEEFD;
      border-radius: 4px;
      cursor: pointer;
    }
    .module-box {
      &:hover {
        background-color: #f0f4ff;
        color: #406eff;
        border-color: #406eff;
      }
      .module-icon {
        width: 32px;
        height: 32px;
        margin-right: 8px;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        > img {
          width: 20px;
          height: 20px;
        }
      }
      .module-name {
        font-size: 14px;
        line-height: 1.4;
        flex: 1;
        word-break: break-word;
        color: #666;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
      }
    }
    .mobile-module-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      border: none;
      max-width: 60px;
      height: auto;
      padding: 0;
      margin: 0 10px 24px 0;
      .module-icon {
        margin-right: 0;
        width: 40px;
        height: 40px;
        img {
          width: 25px;
          height: 25px;
        }
      }
      .module-name {
        margin-top: 6px;
        font-size: 10px;
        line-height: 11px;
        text-align: center;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
      }
    }
    .mobile-module-box:nth-of-type(5n) {
      margin-right: 0 !important;
    }
  }
  .module-item {
    margin:0 6px 0px 0!important;
  }
  @keyframes el-skeleton-loading {
    0% { background-position: 100% 50% }
    100% { background-position: 0 50% }
  }
  .skeleton-container {
    .skeleton-animate {
      background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
      background-size: 400% 100%;
      animation: el-skeleton-loading 1.25s ease infinite;
    }
    .icon-skeleton {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      margin-right: 8px;
    }
    .text-skeleton {
      width: 60%;
      height: 18px;
      border-radius: 999px;
    }
  }
  & ::v-deep {
    .absolute-table-list {
      padding-left: 0;
    }
    .list-tab {
      padding-right: 0;
      .item-content {
        font-size: 14px;
        padding: 10px 0 !important;
      }
      .item-title {
        font-size: 14px !important;
      }
    }
  }
}
</style>
